<template>
  <div class="app-download">
    <a-tooltip position="br" trigger="click" background-color="#7F7F7F">
      <div class="tips">
        <SvgIcon class="app-icon" name="app" />
        <p style="margin-left: 8px; cursor: pointer">APP下载</p>
      </div>
      <template #content>
        <div style="display: flex">
          <div class="trigger-demo-translate">
            <img class="qr-code-img" src="@/assets/iosQRCode.png" />
            <p class="qr-code-text">iOS下载</p>
          </div>
          <div style="width: 12px"></div>
          <div class="trigger-demo-translate">
            <img class="qr-code-img" src="@/assets/androidQRCode.png" />
            <p class="qr-code-text">安卓下载</p>
          </div>
        </div>
      </template>
    </a-tooltip>
  </div>
</template>

<script>
  export default {}
</script>

<style lang="less" scoped>
  .app-download {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 22px;
    font-size: 15px;
    font-weight: 400;
    color: #1e1e1e;
  }

  .trigger-demo-translate {
    opacity: 1;
    padding-top: 12px;
  }

  .tips {
    display: flex;
    align-items: center;
  }

  .qr-code-img {
    width: 130px;
    border-radius: 0px 0px 0px 0px;
  }
  .qr-code-text {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }
</style>
